<template>
  <div class="setup-banner">
    <nav-bar title="设置" left-arrow @click-left="onClickLeft" />
    <router-link :to="{ name: getToken() ? 'User-center' : 'Login' }">
      <div class="tx">
        <img :src="Img" />
        <div>
          <p>昵称：{{ username }}</p>
          <p>账号：{{ nickname }}</p>
        </div>
        <icon name="arrow" style="margin-top: 30px" />
      </div>
    </router-link>
    <ul>
      <li style="border-bottom: 0.3125rem solid rgb(241, 243, 249)">
        2G/3G/4G播放和下载
        <Switch
          v-model="checked"
          size="14px"
          active-color="var(--main-color)"
          inactive-color="gray"
        />
      </li>

      <li style="">
        夜间模式
        <Switch
          v-model="checked"
          size="14px"
          active-color="var(--main-color)"
          inactive-color="gray"
        />
      </li>
    </ul>

    <overlay :show="show" @click="over" />

    <ul>
      <router-link :to="{ name: 'User-safe' }"
        ><li style="color: black">
          账户安全<icon name="arrow" style="margin-top: 15px" /></li
      ></router-link>
      <router-link :to="{ name: 'User-about' }"
        ><li style="color: black">
          关于我们<icon name="arrow" style="margin-top: 15px" /></li
      ></router-link>
      <router-link :to="{ name: 'User-down' }"
        ><li style="color: black">
          修改存储位置<icon name="arrow" style="margin-top: 15px" /></li
      ></router-link>
      <li @click="save">
        清除缓存<icon name="arrow" style="margin-top: 15px" /><span
          class="clear"
          >11.68MB</span
        >
      </li>
      <div class="save" v-show="sa">
        <p>{{ mb ? "11.86mb" : "0mb" }}</p>
        <div>
          <button @click="savefa">取消</button>
          <button @click="savetr">确定</button>
        </div>
      </div>
      <li @click="score">
        去评分<icon name="arrow" style="margin-top: 15px" />
      </li>
      <li @click="news">
        检查更新<icon name="arrow" style="margin-top: 15px" /><span
          class="clear"
          >v3.5.4</span
        >
      </li>
      <Button class="btn" @click="Out">退出登录</Button>
    </ul>
  </div>
</template>
<script setup>
import { ref } from "vue";
import {
  Cell,
  CellGroup,
  NavBar,
  Icon,
  Switch,
  Overlay,
  Button,
  Toast,
} from "vant";
import { dalHtml, removeToken, getToken } from "../Utils/tools";
import { getUserAPI } from "../API/li";
import { useRouter } from "vue-router";
import "vant/es/toast/style";

let nickname = ref("");
let username = ref("");
let Img = ref("");

let router = useRouter();
getUserAPI().then((res) => {
  console.log(res);
  if (res.code == 200) {
    nickname.value = res.data.nickname;
    username.value = res.data.username;
    Img.value =
      res.data.headProtrait == null
        ? "https://img0.baidu.com/it/u=2556283513,3314307180&fm=253&fmt=auto&app=138&f=JPEG?w=514&h=500"
        : res.data.headProtrait;
  } else {
    nickname.value = "未登录";
    username.value = "未登录";
    Img.value =
      "https://img0.baidu.com/it/u=2556283513,3314307180&fm=253&fmt=auto&app=138&f=JPEG?w=514&h=500";
  }
});
const mb = ref(true);
const show = ref(false);
const sa = ref(false);
const over = () => {
  show.value = false;
  sa.value = false;
};
let onClickLeft = () => {
  router.go(-1);
};
const save = () => {
  show.value = true;
  sa.value = true;
};
const savefa = () => {
  show.value = false;
  sa.value = false;
};
const checked = ref(true);
const score = () => {
  Toast.fail("未检测到应用市场");
};
const news = () => {
  Toast.success("暂未发现新版本");
};
const savetr = () => {
  Toast("已清除11.68MB");
  show.value = false;
  sa.value = false;
  mb.value = false;
};

//退出登录
let Out = () => {
  removeToken();
  router.push({
    name: "Home",
  });
};
</script>
<style>
.btn {
  width: 55vw;
  height: 11vw;
  border-radius: 12vw;
  background-color: #007af4;
  margin-top: 2.3333vw;
  color: white;
  margin-left: calc(50% - 27.5vw);
}
.setup-banner img {
  width: 50px;
  height: 50px;
  border: 1px solid #cecece;
  border-radius: 50px;
  border: none;
}
.setup-banner {
  background-color: white;
  overflow: hidden;
}
.setup-banner ul li {
  line-height: 7vh;
  height: 7vh;
  text-indent: 1em;
  border-bottom: 0.0625rem solid #efeeee;
  background-color: white;
  box-sizing: border-box;
  padding-right: 1rem;
  font-size: 0.8rem;
}
.setup-banner .van-icon {
  color: grey;
  float: right;
}
.setup-banner .tx {
  height: 10vh;
  text-indent: 1em;
  border-top: 0.3125rem solid rgb(241, 243, 249);
  border-bottom: 0.3125rem solid rgb(241, 243, 249);
  background-color: white;
  box-sizing: border-box;
  padding-right: 1rem;
  font-size: 0.8rem;
}
.setup-banner .tx div {
  display: inline-block;
  line-height: 4vh;
  width: 200px;
  height: 10vh;
  /* background-color: red; */
  line-height: 4vh;
  font-size: 0.7rem;
  color: black;
}
.setup-banner .tx div p:nth-child(2) {
  color: rgb(95, 95, 95);
}

.setup-banner .tx img {
  float: left;
  margin-left: 2vw;
  margin-top: 0.6667vw;
}
.clear {
  color: gray;
  float: right;
  font-size: 0.6rem;
}
.van-switch {
  float: right;
  margin-top: 2.2489vh;
}
.save {
  width: 80%;
  height: 15vh;
  background-color: white;
  position: absolute;
  z-index: 2;
  border-radius: 2.6667vw;
  top: 40%;
  left: 10%;
  font-size: 0.8rem;
}
.save p {
  line-height: 8vh;
  text-align: center;
  color: rgb(93, 93, 93);
}
.save div {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.save button {
  width: 25%;
  height: 5vh;
  border: none;
  border-radius: 5px;
}
.save button:nth-child(2) {
  background-color: var(--main-color);
  color: white;
}
</style>
